#{extends 'home.html' /}
#{set title: 'Delete User'/}
<h1 class="viewTitle">Delete User</h2>
<div class="viewContent">



#{ifErrors}
	<div class="error">
 <h4>Oops</h4>
   #{errors}
       <li>${error}</li>
   #{/errors}
   </div>
#{/ifErrors}

   <h2>
  Please enter the username/email of 
  the user you want to delete :- 
   </h2> 
   <link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/jquery.autocomplete.css'}" />
   <script type="text/javascript" src="@{'/public/javascripts/jquery.autocomplete.js'}"></script>
   <script>
   $(document).ready(function(){
    var data =  "${userNamesAndEmails}".split(", ")
    data[0] = data[0].substring(1,data[0].length)
    data[data.length-1] = data[data.length-1].substring(0,data[data.length-1].length-1)
   $("#nameOrEmail").autocomplete(data);
   });
   </script>
   <form ACTION="@{Users.deleteUser()}" onsubmit="return verifyDelete()" method="post">
    <div class="formEntry">
			<div class="formLabel">
				<label>Enter username/email </label>
			</div>
            <input type="text" class="inputText" name="nameOrEmail" id="nameOrEmail" required = "true" ></input>
            <div class="clear"></div>
			</div>
			<div class="formEntry">
            <input type = "submit" value = "Submit"/></input>
            </div> 
   </form>
   <script type="text/javascript">
function verifyDelete(){
    msg = "Are you sure you want to delete that user?";
    //all we have to do is return the return value of the confirm() method
    return confirm(msg);
    }
</script>
</div>